<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .5);
            position: relative;
            /* z-index: 1; */

        }

        #wai {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: url(./images/2.jpg) no-repeat center;
            z-index: -2;
            /* background-color: #000; */
        }

        #box {
            width: 30px;
            height: 30px;
            border: 1px solid #000;
            position: absolute;
            bottom: 15%;
            left: 50%;
        }

        .box1 {
            width: 30px;
            height: 30px;
            float: left;
            border-radius: 50%;
            background-color: #fff;
            position: absolute;
            top: -30px;
            box-shadow: 0px 0px 20px rgb(255, 255, 255);
            z-index: 999;

        }
    </style>
</head>

<body>
    <div id="wai">

    </div>
    <script src="./lib/jquery-1.11.3/jquery.js"></script>
    <script>
        // 获取网页高度，用于雪花下降最大距离
        let h = +$('html').height()
        // 获取网页宽度，用于雪花x轴生成最大距离
        let w = +$('html').width()
        // console.log(w);
        // console.log(h);
        setInterval(function () {
            // 获取父盒子wai
            let wai = document.getElementById("wai");
            // 创建盒子div
            box1 = document.createElement('div');
            // 加入父盒子
            wai.prepend(box1)
            // 添加类名
            box1.className = "box1";
            // x轴位置
            let x = Math.floor(Math.random() * w + 60);
            // y轴下落位置
            let y = Math.floor(Math.random() * h + 60);
            // 雪花大小
            let $width = Math.floor(Math.random() * 20 + 10);
            // console.log(y);
            // 生成雪花初始x轴位置，以及雪花大小
            $(".box1").animate({
                left: x,
                width: $width,
                height: $width
            }, 0)
            // $(".box1").animate({ background: white }, 1000)
            // 雪花下落运动
            $(".box1").delay(1000).animate({
                top: y
            }, 2000)
            // 雪花下落后隐藏
            $(".box1").animate({
                opacity: 0
            }, 1000)
            // 为每片雪花添加超时，5秒后删除最后一个.box1元素
            setTimeout(function () {
                $(".box1:last").remove()
            }, 5000)
        }, 100)
    </script>
</body>

</html>